<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    canvas {
        animation: circle 0.5s linear infinite;
    }
    canvas,svg{
        margin: 30px;
    }
    @keyframes circle {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
</style>

<body>
    <canvas width="100" height="100"></canvas>
    <svg width="100" height="100" viewBox="-50,-50,100,100">
        <rect x="-40" y="-50" width="20" height="100" style="fill:red">
            <animateTransform attributeName="transform" attributeType="XML" type="scale" values="1,0.3;1,1;1,0.3"
                begin="0.4s" dur="0.6s" repeatCount="indefinite" />
        </rect>
        <rect x="-10" y="-50" width="20" height="100" style="fill:red">
            <animateTransform attributeName="transform" attributeType="XML" type="scale" values="1,0.3;1,1;1,0.3"
                begin="0.2s" dur="0.6s" repeatCount="indefinite" />
        </rect>
        <rect x="20" y="-50" width="20" height="100" style="fill:red">
            <animateTransform attributeName="transform" attributeType="XML" type="scale" values="1,0.3;1,1;1,0.3"
                dur="0.6s" repeatCount="indefinite" />
        </rect>
    </svg>

    <svg width="100" height="100" viewBox="-50,-50,100,100">
        <rect x="0" y="0" width="20" height="30" transform="translate(-40 20)">
            <animateTransform attributeName="transform" attributeType="XML" type="translate" values="-40 20;-40 -40;-40 20"
                 dur="0.6s" repeatCount="indefinite" />
        </rect>
        <rect x="0" y="0" width="20" height="30" transform="translate(-10 -40)">
            <animateTransform attributeName="transform" attributeType="XML" type="translate" values="-10 -40;-10 20;-10 -40"
            begin="0.4s" dur="0.6s" repeatCount="indefinite" />
        </rect>
        <rect x="0" y="0" width="20" height="30" transform="translate(20 -10)">
            <animateTransform attributeName="transform" attributeType="XML" type="translate" values="20 -40;20 20;20 -40"
            begin="0.2s" dur="0.6s" repeatCount="indefinite" />
        </rect>
    </svg>

    <svg width="100" height="100" viewBox="0 0 100 100" style="fill: orange;">
        <!-- <circle cx="50" cy="50" r="50" /> -->
        <rect x="0" y="0" width="20" height="30">
            <animate attributeType="XML" attributeName="height" values="40; 100;40" dur="0.6s"
                repeatCount="indefinite" />
        </rect>
        <rect x="40" y="0" width="20" height="30">
            <animate begin="0.2s" attributeType="XML" attributeName="height" values="40; 100;40" dur="0.6s"
                repeatCount="indefinite" />
        </rect>
        <rect x="80" y="0" width="20" height="30">
            <animate begin="0.4s" attributeType="XML" attributeName="height" values="40; 100;40" dur="0.6s"
                repeatCount="indefinite" />
        </rect>
    </svg>

    <svg>
        <path id="svg_6"
            d="m87.0675,62.94273l65.49992,-43.54401l65.50007,43.54401l-25.01869,70.45599l-80.96254,0l-25.01876,-70.45599z"
            fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff" />
        <circle r="10" style="fill:red">
            <animateMotion dur="10s" repeatCount="indefinite"
                path="m87.0675,62.94273l65.49992,-43.54401l65.50007,43.54401l-25.01869,70.45599l-80.96254,0l-25.01876,-70.45599z">
            </animateMotion>
        </circle>
    </svg>

    <svg>
        <path
            d="m0.75,32.83523l34.37718,0l10.62281,-32.08523l10.62282,32.08523l34.37718,0l-27.81168,19.82953l10.62336,32.08523l-27.81169,-19.83007l-27.81168,19.83007l10.62337,-32.08523l-27.81168,-19.82953z"
            stroke-width="1.5" stroke="#fff" fill="#000">
            <animateTransform attributeName="transform" attributeType="XML" type="rotate"
                values="0 45,42; 60 45,42; 0 45,42" dur="3" repeatCount="indefinite" />
        </path>
    </svg>

    <svg>
        <circle cx="150" cy="50">
            <animate attributeName="r" values="0;40;0" dur="5s" repeatCount="indefinite" />
            </cicle>
    </svg>
</body>
<script>
    var canvas = document.querySelector('canvas');
    var con = canvas.getContext('2d');
    // 画图
    con.beginPath();
    con.arc(15, 15, 10, 0, 4 * Math.PI);
    con.lineWidth = "4";
    con.strokeStyle = "rgba(255,0,0,0.2)"
    con.stroke();

    con.beginPath();
    con.arc(15, 15, 10, 0, 0.1 * Math.PI);
    con.strokeStyle = "rgba(255,0,0,0.7)"
    con.stroke();
</script>

</html>